<template>
  <div class="exam-layout">
    <!-- 顶部导航 -->
    <div class="exam-header">
      <div class="header-content">
        <div class="header-left">
          <el-button text @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回首页
          </el-button>
          <div class="breadcrumb">
            <span>在线考试</span>
            <el-icon><ArrowRight /></el-icon>
            <span>{{ currentExam?.title || '考试中心' }}</span>
          </div>
        </div>
        
        <div class="header-right">
          <el-button @click="toggleHistory">
            <el-icon><Clock /></el-icon>
            考试记录
          </el-button>
          <el-button @click="toggleSettings">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="exam-main">
      <router-view />
    </div>

    <!-- 考试记录抽屉 -->
    <el-drawer
      v-model="showHistory"
      title="考试记录"
      direction="rtl"
      size="400px"
    >
      <div class="history-content">
        <div class="history-stats">
          <div class="stat-item">
            <div class="stat-number">{{ examStats.totalExams }}</div>
            <div class="stat-label">总考试次数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ examStats.passedExams }}</div>
            <div class="stat-label">通过次数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ examStats.averageScore }}%</div>
            <div class="stat-label">平均分数</div>
          </div>
        </div>
        
        <div class="history-list">
          <div 
            v-for="record in examHistory" 
            :key="record.id"
            class="history-item"
          >
            <div class="exam-info">
              <div class="exam-title">{{ record.examTitle }}</div>
              <div class="exam-meta">
                <span class="exam-date">{{ formatDate(record.completedAt) }}</span>
                <span class="exam-duration">用时: {{ record.duration }}</span>
              </div>
            </div>
            <div class="exam-result">
              <div class="score" :class="getScoreClass(record.score)">
                {{ record.score }}分
              </div>
              <div class="status">
                <el-tag :type="record.passed ? 'success' : 'danger'" size="small">
                  {{ record.passed ? '通过' : '未通过' }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 设置抽屉 -->
    <el-drawer
      v-model="showSettings"
      title="考试设置"
      direction="rtl"
      size="300px"
    >
      <div class="settings-content">
        <div class="setting-group">
          <label>自动保存答案</label>
          <el-switch v-model="examSettings.autoSave" />
          <div class="setting-desc">每隔30秒自动保存答题进度</div>
        </div>
        
        <div class="setting-group">
          <label>答题提醒</label>
          <el-switch v-model="examSettings.reminders" />
          <div class="setting-desc">未答题目和时间提醒</div>
        </div>
        
        <div class="setting-group">
          <label>全屏模式</label>
          <el-switch v-model="examSettings.fullscreen" @change="handleFullscreenChange" />
          <div class="setting-desc">考试时自动进入全屏</div>
        </div>
        
        <div class="setting-group">
          <label>字体大小</label>
          <el-select v-model="examSettings.fontSize" @change="handleFontSizeChange">
            <el-option label="小" value="small" />
            <el-option label="中" value="medium" />
            <el-option label="大" value="large" />
          </el-select>
        </div>
        
        <div class="setting-group">
          <label>主题模式</label>
          <el-select v-model="examSettings.theme" @change="handleThemeChange">
            <el-option label="浅色" value="light" />
            <el-option label="深色" value="dark" />
            <el-option label="护眼" value="eye-care" />
          </el-select>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  ArrowLeft, ArrowRight, Clock, Setting
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 响应式数据
const showHistory = ref(false)
const showSettings = ref(false)
const currentExam = ref(null)

// 考试统计数据
const examStats = ref({
  totalExams: 15,
  passedExams: 12,
  averageScore: 85
})

// 考试记录
const examHistory = ref([
  {
    id: 1,
    examTitle: 'JavaScript基础测试',
    score: 92,
    passed: true,
    duration: '25分钟',
    completedAt: new Date('2024-01-15')
  },
  {
    id: 2,
    examTitle: 'Vue3框架考试',
    score: 88,
    passed: true,
    duration: '35分钟',
    completedAt: new Date('2024-01-10')
  },
  {
    id: 3,
    examTitle: 'CSS样式设计',
    score: 76,
    passed: true,
    duration: '20分钟',
    completedAt: new Date('2024-01-05')
  },
  {
    id: 4,
    examTitle: 'HTML结构基础',
    score: 58,
    passed: false,
    duration: '18分钟',
    completedAt: new Date('2024-01-01')
  }
])

// 考试设置
const examSettings = ref({
  autoSave: true,
  reminders: true,
  fullscreen: false,
  fontSize: 'medium',
  theme: 'light'
})

// 方法
const goBack = () => {
  router.push('/')
}

const toggleHistory = () => {
  showHistory.value = !showHistory.value
}

const toggleSettings = () => {
  showSettings.value = !showSettings.value
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

const getScoreClass = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

const handleFullscreenChange = (value) => {
  if (value) {
    ElMessage.info('考试时将自动进入全屏模式')
  }
}

const handleFontSizeChange = (size) => {
  document.documentElement.style.setProperty('--exam-font-size', 
    size === 'small' ? '14px' : size === 'large' ? '18px' : '16px'
  )
}

const handleThemeChange = (theme) => {
  document.documentElement.setAttribute('data-exam-theme', theme)
  ElMessage.success(`已切换到${theme === 'light' ? '浅色' : theme === 'dark' ? '深色' : '护眼'}主题`)
}

// 生命周期
onMounted(() => {
  // 应用保存的设置
  handleFontSizeChange(examSettings.value.fontSize)
  handleThemeChange(examSettings.value.theme)
})

onUnmounted(() => {
  // 清理资源
})
</script>

<style lang="scss" scoped>
.exam-layout {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
}

.exam-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}

.header-right {
  display: flex;
  gap: 12px;
}

.exam-main {
  flex: 1;
  padding: 20px;
}

.history-content {
  .history-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    
    .stat-item {
      text-align: center;
      padding: 16px;
      background: var(--el-fill-color-extra-light);
      border-radius: 8px;
      
      .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: var(--el-color-primary);
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
  
  .history-list {
    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      margin-bottom: 12px;
      
      .exam-info {
        flex: 1;
        
        .exam-title {
          font-weight: 500;
          margin-bottom: 4px;
          color: var(--el-text-color-primary);
        }
        
        .exam-meta {
          display: flex;
          gap: 12px;
          font-size: 12px;
          color: var(--el-text-color-placeholder);
        }
      }
      
      .exam-result {
        text-align: right;
        
        .score {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 4px;
          
          &.excellent {
            color: var(--el-color-success);
          }
          
          &.good {
            color: var(--el-color-primary);
          }
          
          &.pass {
            color: var(--el-color-warning);
          }
          
          &.fail {
            color: var(--el-color-danger);
          }
        }
      }
    }
  }
}

.settings-content {
  .setting-group {
    margin-bottom: 24px;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
    
    .setting-desc {
      margin-top: 4px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
    
    .el-select {
      width: 100%;
    }
  }
}

// 主题样式
:global([data-exam-theme="dark"]) {
  .exam-layout {
    background: #1a1a1a;
    color: #ffffff;
  }
  
  .exam-header {
    background: #2d2d2d;
    border-bottom-color: #404040;
  }
}

:global([data-exam-theme="eye-care"]) {
  .exam-layout {
    background: #f7f3e9;
    color: #5d4e37;
  }
  
  .exam-header {
    background: #faf6ed;
    border-bottom-color: #e8dcc0;
  }
}

// 字体大小
:global(:root) {
  --exam-font-size: 16px;
}

:global(.exam-content) {
  font-size: var(--exam-font-size);
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .header-left,
  .header-right {
    width: 100%;
    justify-content: center;
  }
  
  .history-stats {
    grid-template-columns: 1fr;
  }
  
  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    
    .exam-result {
      text-align: left;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
